<template>
  <el-tabs v-model="processDataDrawerActiveTab" type="border-card">
    <el-tab-pane name="resume" label="流程履历">
      <el-scrollbar class="data-tab-pane-process">
        <SillyResume :category="category" :master-id="masterId" @loaded="resumeLoaded"/>
      </el-scrollbar>
    </el-tab-pane>
    <el-tab-pane name="viewer" label="流程图" :lazy="true">
      <el-scrollbar class="data-tab-pane-process">
        <SillyBpmnViewer :category="category" :process-id="processId" :resumes="resumeList"></SillyBpmnViewer>
      </el-scrollbar>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import {ref, reactive} from "vue";
import SillyResume from "@/components/bpmn/SillyResume.vue";
import SillyBpmnViewer from "@/components/bpmn/SillyBpmnViewer.vue";
import {Resume} from "@/core/entity/Resume";

const {category, processId, masterId} = defineProps(['category', 'processId', 'masterId']);
const processDataDrawerActiveTab = ref("resume");
const resumeList = reactive<Resume[]>([]);

function resumeLoaded(resumes: Resume[]) {
  resumeList.length = 0;
  if (resumes && resumes.length > 0) {
    resumeList.push(...resumes);
  }
}

</script>